<route>{ title: '中国地图' }</route>

<template>
  <h1>ChartMapChina 地图图表</h1>
  <p>
    与ChartBase类似，只是增加了地图数据引入。地图数据来源于echarts-countries-js库。
  </p>

  <h2>基础用法</h2>
  <!-- prettier-ignore -->
  <code-demo>
    <chart-map-china
      style="width: 100%; height: 300px"
      :option="chinaOption"
    ></chart-map-china>

    <template #code>
      {{ `
<template>
  <chart-map-china
    style="width: 100%; height: 300px"
    :option="chinaOption"
  ></chart-map-china>
</template>

<script>
const chinaOption = {
  visualMap: {
    type: 'piecewise',
    showLabel: true,
    pieces: [
      { min: 120, color: '#155ce3', label: '>120' },
      { min: 100, max: 120, label: '100~120', color: '#1761ed' },
      { min: 80, max: 100, label: '80~100', color: '#2970f6' },
      { min: 60, max: 80, label: '60~80', color: '#6884f5' },
      { min: 40, max: 60, label: '40~60', color: '#a0b6fb' },
      { min: 20, max: 40, label: '20~40', color: '#cddcfe' },
      { min: 0, max: 20, label: '0~20', color: '#f0f5ff' },
    ],
    top: 0,
    right: 0,
    padding: 20,
    borderWidth: 1,
    borderColor: '#ccc',
  },
  series: [
    {
      name: '香港18区人口密度',
      type: 'map',
      map: 'china',

      data: [
        { name: '北京', value: 200 },
        { name: '上海', value: 300 },
        { name: '河北', value: 200 },
      ],
      label: {
        show: true,
      },
      itemStyle: {
        areaColor: '#f0f5ff',
        borderColor: '#fff',
      },
    },
  ],
}
</script>
      ` }}
    </template>
  </code-demo>

  <h2>Attributes</h2>
  <table-info type="props" :data="propsTable"></table-info>
</template>

<script setup>
const chinaOption = {
  visualMap: {
    type: 'piecewise',
    showLabel: true,
    pieces: [
      { min: 120, color: '#155ce3', label: '>120' },
      { min: 100, max: 120, label: '100~120', color: '#1761ed' },
      { min: 80, max: 100, label: '80~100', color: '#2970f6' },
      { min: 60, max: 80, label: '60~80', color: '#6884f5' },
      { min: 40, max: 60, label: '40~60', color: '#a0b6fb' },
      { min: 20, max: 40, label: '20~40', color: '#cddcfe' },
      { min: 0, max: 20, label: '0~20', color: '#f0f5ff' },
    ],
    top: 0,
    right: 0,
    padding: 20,
    borderWidth: 1,
    borderColor: '#ccc',
  },
  series: [
    {
      name: '香港18区人口密度',
      type: 'map',
      map: 'china',

      data: [
        { name: '北京', value: 200 },
        { name: '上海', value: 300 },
        { name: '河北', value: 200 },
      ],
      label: {
        show: true,
      },
      itemStyle: {
        areaColor: '#f0f5ff',
        borderColor: '#fff',
      },
    },
  ],
}

const propsTable = [
  {
    name: 'option',
    desc: '同echarts参数，样式尽量使用 ui-lib/components/chart/style 中定义的样式。',
    type: 'Object',
  },
]
</script>
